<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>受众分析</title>
    
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
    <!-- <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> -->
    <script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<!-- <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> -->
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.4.1/dist/g2.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
	<script src="https://gw.alipayobjects.com/os/antv/assets/lib/lodash-4.17.4.min.js"></script>
	<script src="https://webapi.amap.com/maps?v=1.4.1&key=0d78256ea89beeb8c25d1cd047549d1f"></script>
	<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

</head>
<body class="fixed-sidebar full-height-layout gray-bg">
<div class="wrapper wrapper-content">
	<div class="row">
	<div class="col-sm-6">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>性别分布</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode"></div>
<script>
var data = [{
  type: '男',
  value: 2101
}, {
  type: '女',
  value: 1368
}];

// 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
var sliceNumber = 0.01;

// 自定义 other 的图形，增加两条线
G2.Shape.registerShape('interval', 'sliceShape', {
  draw: function draw(cfg, container) {
    var points = cfg.points;
    var path = [];
    path.push(['M', points[0].x, points[0].y]);
    path.push(['L', points[1].x, points[1].y - sliceNumber]);
    path.push(['L', points[2].x, points[2].y - sliceNumber]);
    path.push(['L', points[3].x, points[3].y]);
    path.push('Z');
    path = this.parsePath(path);
    return container.addShape('path', {
      attrs: {
        fill: cfg.color,
        path: path
      }
    });
  }
});

var chart = new G2.Chart({
  container: 'mountNode',
  forceFit: true,
  height: window.innerHeight-200
});

chart.source(data);
chart.coord('theta', {
  innerRadius: 0.75
});
chart.tooltip({
  showTitle: false
});
chart.intervalStack().position('value').color('type').shape('sliceShape');

chart.render();
</script>
             </div>
         </div>
     </div>
<div class="col-sm-6">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>地域分布</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode1"></div>
<script>
var data = [{
  type: '济南',
  value: 0.19
}, {
  type: '青岛',
  value: 0.15
}, {
  type: '临沂',
  value: 0.08
}, {
	type: '潍坊',
	value: 0.08
}, {
	type: '聊城',
	value: 0.05
}, {
	type: '滨州',
	value: 0.06
}, {
	type: '东营',
	value: 0.11
}, {
  type: '菏泽',
  value: 0.08
},{
  type: '济宁',
  value: 0.05
}, {
  type: '枣庄',
  value: 0.09
},{
  type: '烟台',
  value: 0.06
}];
var chart = new G2.Chart({
  container: 'mountNode1',
  forceFit: true,
  height: window.innerHeight-200,
  padding: 'auto'
});
chart.source(data);
chart.legend(false);
chart.coord('theta', {
  radius: 0.75
});
var pie = chart.intervalStack().position('value').color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060']).style({
  opacity: 0.4
}).select(true, {
  style: {
    stroke: 'black',
    lineWidth: 2,
    opacity: 1
  }
}).label('type', function(val) {
  var opacity = val === '四线及以下' ? 1 : 0.5;
  return {
    offset: -30,
    textStyle: {
      opacity: opacity,
      fill: 'white',
      fontSize: 12,
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    },
    formatter: function formatter(text, item) {
      var d = item.point;
      return d.type + '\n' + d.value + '%';
    }
  };
});
chart.render();
pie.setSelected(data[0]);
chart.on('afterpaint', function() {
  pie.setSelected(data[0]);
});
</script>
             </div>
         </div>
     </div>
<div class="col-sm-6">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>专业分布</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode2"></div>
<style>
.bottom-tool-box{position: absolute; bottom:0px; left: 0px; width: 100%; height:40px; z-index:1000}
.bottom-tool-box .sort-button {width: auto; height:40%; position: absolute; top:30%; left:70%}
</style>
<div class="bottom-tool-box"></div>
<script>
var sortType = 'positive';
var data = [{
  type: '电子信息工程',
  value: 12
}, {
  type: '电子科学与技术',
  value: 15
}, {
  type: '通信工程',
  value: 10
}, {
  type: '微电子科学与工程',
  value: 7
}, {
  type: '计算机科学与技术',
  value: 15
}, {
  type: '软件工程',
  value: 12
}, {
  type: '网络工程',
  value: 10
}, {
  type: '信息安全',
  value: 9
}, {
  type: '物联网工程',
  value: 7
}, {
  type: '数字媒体技术',
  value: 3
}];
var chart = new G2.Chart({
  container: 'mountNode2',
  forceFit: true,
  height: window.innerHeight-200,
  padding: [20, 40, 50, 124]
});
chart.source(data, {
  value: {
    max: 30,
    min: 0,
    nice: false,
    alias: '占比（百分比）',
    formatter: function formatter(val) {
        val = val + '%';
        return val;
      }
  }
});
chart.axis('type', {
  label: {
    textStyle: {
      fill: '#8d8d8d',
      fontSize: 12
    }
  },
  tickLine: {
    alignWithLabel: false,
    length: 0
  },
  line: {
    lineWidth: 0
  }
});
chart.axis('value', {
  label: null,
  title: {
    offset: 30,
    textStyle: {
      fontSize: 12,
      fontWeight: 5
    }
  }
});
chart.legend(false);
chart.coord().transpose();
chart.interval().position('type*value').size(26).opacity(1).label('value', {
  textStyle: {
    fill: '#8d8d8d'
  },
  offset: 10
});
chart.render();
$('.sort-button').click(function() {
  sortType = sortType === 'positive' ? 'negative' : 'positive';
  sortData(sortType);
  chart.repaint();
});

function sortData(sortType) {
  if (sortType === 'positive') {
    data.sort(function(a, b) {
      return b.value - a.value;
    });
  } else {
    data.sort(function(a, b) {
      return a.value - b.value;
    });
  }
}
</script>
             </div>
         </div>
     </div>
<div class="col-sm-6">
		<div class="ibox float-e-margins">
             <div class="ibox-title">
                 <h5>兴趣分布</h5>
			</div>
            <div class="ibox-content">
                  <div id="mountNode3"></div>
<style>
.bottom-tool-box{position: absolute; bottom:0px; left: 0px; width: 100%; height:40px; z-index:1000}
.bottom-tool-box .sort-button {width: auto; height:40%; position: absolute; top:30%; left:70%}
</style>
<div class="bottom-tool-box"></div>
<script>
var sortType = 'positive';
var data = [{
  type: '足球',
  value: 20
}, {
  type: '数学',
  value: 15
}, {
  type: '英语',
  value: 10
}, {
  type: '科幻',
  value: 7
}, {
  type: '文学',
  value: 7
}, {
  type: '管理',
  value: 12
}, {
  type: '物理',
  value: 2
}, {
  type: '计算机',
  value: 9
}, {
  type: '材料',
  value: 15
}, {
  type: '生物',
  value: 3
}];
var chart = new G2.Chart({
  container: 'mountNode3',
  forceFit: true,
  height: window.innerHeight-200,
  padding: [20, 40, 50, 124]
});
chart.source(data, {
  value: {
    max: 30,
    min: 0,
    nice: false,
    alias: '占比（百分比）',
    formatter: function formatter(val) {
        val = val + '%';
        return val;
      }
  }
});
chart.axis('type', {
  label: {
    textStyle: {
      fill: '#8d8d8d',
      fontSize: 12
    }
  },
  tickLine: {
    alignWithLabel: false,
    length: 0
  },
  line: {
    lineWidth: 0
  }
});
chart.axis('value', {
  label: null,
  title: {
    offset: 30,
    textStyle: {
      fontSize: 12,
      fontWeight: 5
    }
  }
});
chart.legend(false);
chart.coord().transpose();
chart.interval().position('type*value').size(26).opacity(1).label('value', {
  textStyle: {
    fill: '#8d8d8d'
  },
  offset: 10
});
chart.render();

</script>
             </div>
         </div>
     </div>
    </div>
    </div>

</body>
</html>
